<template>

   <div>
   <!-- el-tree组件 渲染树形权限数据 -->
   <el-tree
   ref="tree"
   node-key="id" 
   :data="treeList" 
   :props="{label:'name'}"
   show-checkbox
   default-expand-all
   check-strictly
   />
      <div style="margin-top: 20px; text-align: rigth" >
         <el-button type="primaty" @click="hAssignPer">确定</el-button>
         <el-button @click="hCancel">取消</el-button>
      </div>
   </div>
</template>

<script>
import {getPermissionList} from '@/api/permissions'
import { tranDataToTree } from '../../utils'
import { getRolesDetail, assignPerm } from '@/api/setting'
export default {
    props:{
        id:{
            type:String,
            required:true
        }
    },
    data(){
        return{
            treeList:[]
        }
    },
    created(){
        this.loadPermissionList()
    },
    methods:{
        // 给角色分配权限
        async hAssignPer(){
            try {
                // 获取选中的权限点
                const permIds=this.$refs.tree.getCheckedKeys()
                await assignPerm({id:this.id, permIds:permIds})
                this.$emit('close')
            } catch (error) {
                console.log('error',error);
            }
        },
        async loadPermissionList(){
            try {
                const res= await getPermissionList()
                console.log('getPermissionList',res);

                this.treeList=tranDataToTree(res.data)

                // 获取当前角色的权限点
                const info= await getRolesDetail(this.id)
                // info.data.permIds --->['权限点的id']
                // 让当前角色拥有的权限  处于选中状态
                this.$refs.tree.setCheckedKeys(info.data.permIds)
                console.log('info',info);
            } catch (error) {
                console.log('getPermissionList',error);
            }
        },
        hCancel(){
            this.$emit('close')
        }
    }
}
</script>

<style scoped>

</style>